<template>
  <div>
    <h2>{{ state }}</h2>
    <h2>{{ m1 }} --- {{ m2 }}</h2>
    <button @click="change">更新数据</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRef } from 'vue';

const state = reactive({
  name: '黄鼠大王',
  like: '灯油'
})
// ref是拷贝了一份响应式数据 和state无关
const m1 = ref(state.name)
// toRef的数据与原响应式数据有关联 一起变
const m2 = toRef(state, "name")

function change() {
  // m1.value = '猪八戒'
  m2.value = '唐僧'
}
</script>

<style scoped></style>